<!doctype html>
 <html>
 <head>
 <title>五彩连珠</title>
 </head>
<body>
<canvas id="canvas" height="600" width="780" style="border:solid 1px #369;background:#333"></canvas>
 <script type="text/javascript">
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');
	var  g = {
		cellCount: 9,
		lineCount: 5
	};
	var map = {
		startX: 20.5,
		startY: 60.5,
		cellWidth: 30,
		getEndX: function(){
			return g.cellCount*this.cellWidth + this.startX;
		},
		getEndY: function(){
			return g.cellCount*this.cellWidth + this.startY;
		},
		draw: function(){
			ctx.beginPath();
			ctx.moveTo(this.startX,this.startY);
			for(var i=0;i<=g.cellCount;i++){
				var p1 = i*this.cellWidth + this.startX;
				ctx.moveTo(p1,this.startY);
				ctx.lineTo(p1,this.getEndY());

			    var p2 = i * this.cellWidth + this.startY;   
				ctx.moveTo(this.startX, p2);   
				ctx.lineTo(this.getEndX(), p2); 
			}
			ctx.strokeStyle = "#456";   
			ctx.stroke();  
		},
		drawBubble: function (x, y) {   
			var px = this.startX + this.cellWidth * x - this.cellWidth / 2;   
			var py = this.startY + this.cellWidth * y - this.cellWidth / 2;   
			ctx.beginPath();   
			ctx.arc(px, py, 12, 0, Math.PI * 2);   
			ctx.strokeStyle = "white";   
			ctx.fillStyle = "yellow";   
			ctx.fill();   
			ctx.stroke();   
		}, 
		clearBubble: function (x, y) {   
			var px = this.startX + this.cellWidth * x - this.cellWidth + 0.5;   
			var py = this.startY + this.cellWidth * y - this.cellWidth + 0.5;   
			ctx.beginPath();   
			ctx.clearRect(px, py, this.cellWidth - 1, this.cellWidth - 1);   
			ctx.stroke();   
		} 
	}
	map.draw();
    map.drawBubble();
 </script>
</body>
</html> 